﻿@using GigaSite.Web.Classes
@model GigaSite.Web.Areas.Catalog.Models.CreateAdsModel
@{
    ViewBag.Title = "Добавить объявление";
    Layout = "../../../../Views/Shared/_Layout.cshtml";
}

<div class="page" id="CreateAdsPage">
    @* Навигационная цепочка *@
    @Html.NavigationChain()
    
    @* Выбор категории объявления *@
    <h3 class="title">Где бы вы хотели разместить ваше объявление?</h3>
    <div id="categorySelector">
        @{
            Html.RenderAction("CreateAdsCategories",new {categoryId = 27}); @* Загружаем корневые категории объявлений *@
        }
    </div>
    <div class="clearfix separator"></div>
    <script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/Common/createAdsCategorySelector.js")"></script>
    <script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/Common/multipleImagesUploader.js")"></script>
    
    @* Контрол с путем выбранной категории объявления *@
    <div id="categoryPath" class="bigBrownBox">
        Ваше объяление будет размещено в разделе: <span id="selectedPath"></span>
    </div>
    
    @* Сама форма*@
    <div class="adsForm">
        @using (@Html.BeginForm("CreateAds","Ads",FormMethod.Post,new {id="adsForm",enctype="multipart/form-data"}))
        {
            @Html.Hidden("SelectedCategoryId")
            <div class="adsSection" style="border-top: 0px; padding-top: 0px">
                @* Заголовок объявления *@
                <div class="editor-label">
                    @Html.LabelFor(m => m.Title)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(m => m.Title,new {maxlength = 65})
                    <div id="titleCharsLeft" class="charsLeft">Осталось символов: <span class="leftCharsCount">65</span></div>
                </div>
                
                @* Содержимое объявления *@
                <div class="editor-label">
                    @Html.LabelFor(m => m.AdsContent)
                </div>
                <div class="charsLeft">
                    Не более 4000 символов. Не должен содержать контактные данные.
                </div>
                <div class="editor-field">
                    @Html.TextAreaFor(m => m.AdsContent, new { @class = "adsContent",maxlength = 4000 })
                    <div id="contentCharsLeft" class="charsLeft">Осталось символов: <span class="leftCharsCount">4000</span></div>
                </div>
                
                @* Срок истечения *@
                <div class="editor-label">
                    @Html.LabelFor(m => m.ExpirationDeadline)
                </div>
                <div class="charsLeft">
                    Выберите срок, через который ваше объявления будет автоматически перемещено в архив
                </div>
                <div class="editor-field">
                    @Html.DropDownListForEnum(m => m.ExpirationDeadline)
                </div>
                
                @* Цена *@
                <div class="editor-label">
                    @Html.LabelFor(m => m.Price)
                </div>
                <div class="charsLeft">
                    Введите желаемую цену за продаваемый, покупаемый объект, оказание услуги и т.д.
                </div>
                <div class="editor-field input-append">
                    @Html.TextBoxFor(m => m.Price)<span class="add-on">Рублей</span>
                </div>
            </div>
            
            @* Фотографии *@
            <div class="adsSection">
                <h3 class="title">Фотографии</h3>
                <p class="smallInfo">
                    Выберите один или несколько файлов с фотографиями, релевантными к вашему объявлению. Тип jpg, png или gif, размер не более 5ти мегабайт. Фотография увеличивает посещаемость объявление в три раза. Объявления без фотографий не попадают в Топ.
                </p>
                <div class="editor-field">
                    <input type="file" id="adsImages" name="adsImages" multiple="true"/>
                </div>
                <ul class="photoInputsHolder">
                
                </ul>
            </div>
            
            @* Контактные данные *@
            <div class="adsSection">
                <h3 class="title">Контактные данные</h3>
                <div class="editor-label">
                    @Html.LabelFor(m => m.Email)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(m => m.Email)
                </div>
            
                <div class="editor-label">
                    @Html.LabelFor(m => m.Phone)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(m => m.Phone)
                </div>
            </div>
            
            @* Нижний бокс с сабмитом *@
            <div class="bigBrownBox" id="submitHolder">
                <input type="submit" value="Опубликовать объявление"/>
            </div>
        }
    </div>
</div>

<script language='javascript' type="text/javascript">
    // Логика обработки количества оставшихся символов
    $(document).ready(function () {
        $("#Title").keydown(function (e) {
            $(this).parent().find(".leftCharsCount").text(65 - $(this).val().length);
        });
        $("#Title").keydown();
        $("#AdsContent").keydown(function (e) {
            $(this).parent().find(".leftCharsCount").text(4000 - $(this).val().length);
        });
        $("#AdsContent").keydown();
    });

    // инициализируем валидаторы
    InitCreateAdsFormValidation();

    // Иницииализруем загрузчик
    var uploader = new MultipleImagesUploader($("#adsImages"), $(".photoInputsHolder"));
</script>
